<template>
	<view>
		<!-- 测试 -->
		<view class="content" v-if="isShow">
			<view class="con_box1">
				<view class="search" @click="searchFn">
					<image src="@/static/approval/search.png" mode=""></image>
					<text>搜索</text>
				</view>
				<view class="search" @click="filterFn">
					<image src="@/static/approval/filter.png" mode=""></image>
					<text>筛选</text>
				</view>
			</view>
			<view class="con_box2">
				<view
					class="con_list"
					v-for="(item, index) in approvalList"
					@click="approvalDetailFn(item)"
					:key="index"
				>
					<view class="left">
						<image
							src=""
							mode=""
							style="
								width: 66upx;
								height: 66upx;
								border-radius: 50%;
								background: rgba(216, 216, 216, 1);
							"
						></image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{ item.confirm_intro }}</text>
							<text class="time">{{ item.start_time }}</text>
						</view>
						<view class="name">签约公司：{{ item.company }}</view>
						<view class="name">信息类型：{{ item.news_type }}</view>
						<!-- <view class="name">签单销售：{{item.user}}</view> -->
						<view class="hint">{{ item.status }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="con_box2" v-if="tabCurrentIndex==1">
				<view class="con_list" v-for="(item,index) in approvalList"  @click="approvalDetailFn(item)">
					<view class="left">
						<image src="" mode="" style="width: 66upx;height:66upx;border-radius: 50%;background:rgba(216,216,216,1);"></image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{item.title}}</text>
							<text class="time">{{item.create_time}}</text>
						</view>
						<view class="name">签约公司：{{item.company}}</view>
						<view class="name">信息类型：{{item.news_type}}</view>
						<view class="name">签单销售：{{item.user}}</view>
						<view :class="[{green: item.status=='审核通过',red: item.status=='审核驳回',gray: item.status=='审核撤销',}]">{{item.status}}</view>
					</view>
				</view>
			</view> -->
			<view
				class="tip"
				style="font-size: 26upx; text-align: center; padding: 20upx 0"
				v-if="approvalList.length == 0"
			>
				暂无内容~
			</view>
		</view>
		<!-- 搜索页面 -->
		<view class="search_box" v-if="isSearch">
			<view class="top">
				<image
					class="search"
					src="@/static/approval/search.png"
					mode=""
				></image>
				<image
					v-if="name !== ''"
					class="cancel"
					@click="clearName"
					src="@/static/approval/clear.png"
					mode=""
				></image>
				<input
					class="input"
					type="text"
					v-model="name"
					@input="getName"
					placeholder="搜索"
					placeholder-style="font-size:28upx;color:#CCCCCC"
				/>
				<view class="cancel" @click="cancleSearch">取消</view>
			</view>
			<view class="search_list">
				<view class="tip">
					<text>搜索结果共{{ searchResultList.length }}条</text>
				</view>
				<view
					class="con_list"
					v-for="(item, index) in searchResultList"
					:key="index"
					@click="approvalDetailFn(item)"
				>
					<view class="left">
						<image
							src=""
							mode=""
							style="
								width: 66upx;
								height: 66upx;
								border-radius: 50%;
								background: rgba(216, 216, 216, 1);
							"
						></image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{ item.title }}</text>
							<text class="time">{{ item.create_time }}</text>
						</view>
						<view class="name">审核状态：{{ item.status }}</view>
						<view class="name">签单销售：{{ item.user }}</view>
						<view class="name">信息类型：{{ item.news_type }}</view>
						<!-- <view class="hint">李某某审批中</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索页面结束 -->

		<!-- 筛选内容 -->
		<view class="filter_box" v-if="isFilter">
			<!-- 状态 -->
			<view class="con_box status">
				<view class="title">
					{{ filterType.check_status.text }}
				</view>
				<view class="list">
					<text
						:class="{ active: item.id === checkId }"
						v-for="(item, index) in filterType.check_status.items"
						:key="index"
						@click="checkStatus(item)"
						>{{ item.title }}</text
					>
				</view>
			</view>
			<!-- 公司 -->
			<view class="con_box status">
				<view class="title">
					{{ filterType.company_id.text }}
				</view>
				<view class="list">
					<text
						:class="{ active: item.id === companyID }"
						v-for="(item, index) in filterType.company_id.items"
						:key="index"
						@click="checkCompany(item)"
						>{{ item.title }}</text
					>
				</view>
			</view>
			<!-- 审核项 -->
			<view class="con_box status">
				<view class="title">
					{{ filterType.confirm_intro.text }}
				</view>
				<view class="list">
					<text
						:class="{ active: item.id === introID }"
						v-for="(item, index) in filterType.confirm_intro.items"
						:key="index"
						@click="checkIntro(item)"
						>{{ item.title }}</text
					>
				</view>
			</view>
			<!-- 时间 -->
			<view class="con_box status">
				<view class="title">
					{{ filterType.range.text }}
				</view>
				<view class="list">
					<text
						:class="{ active: item.id === timeID }"
						v-for="(item, index) in filterType.range.items"
						v-if="index != 4 && index != 5"
						:key="index"
						@click="checkTime(item)"
						>{{ item.title }}</text
					>
					<timeSelector
						showType="yearToMinute"
						@btnConfirm="bindStartDate"
					>
						<text
							:class="{ active: item.id === timeID }"
							v-if="index == 4"
							v-for="(item, index) in filterType.range.items"
							:key="index"
							@click="checkTimeType(item)"
							>{{ item.title }}</text
						>
					</timeSelector>
					<timeSelector
						showType="yearToMinute"
						@btnConfirm="bindEndDate"
					>
						<text
							:class="{ active: item.id === timeID }"
							v-if="index == 5"
							v-for="(item, index) in filterType.range.items"
							:key="index"
							@click="checkTimeType(item)"
							>{{ item.title }}</text
						>
					</timeSelector>
				</view>
			</view>
			<!-- 时间类型 -->
			<!-- 	<view class="con_box status">
				<view class="title">
					{{filterType.range_type.text}}
				</view>
				<view class="list" >
					<timeSelector showType="yearToMinute" @btnConfirm="bindDateChange"  >
						  <text :class="{active: item.id === timeTypeID}" v-if="index==0"  v-for="(item,index) in filterType.range_type.items" :key="index" @click="checkTimeType(item)">{{item.title}}</text>
					</timeSelector>	
					<timeSelector showType="yearToMinute" @btnConfirm="bindTimeChange"  >
						  <text :class="{active: item.id === timeTypeID}" v-if="index==1"  v-for="(item,index) in filterType.range_type.items" :key="index" @click="checkTimeType(item)">{{item.title}}</text>
					</timeSelector>	
					<timeSelector showType="yearToMinute" @btnConfirm="bindChange"  >
						  <text :class="{active: item.id === timeTypeID}" v-if="index==2"  v-for="(item,index) in filterType.range_type.items" :key="index" @click="checkTimeType(item)">{{item.title}}</text>
					</timeSelector>	
				</view>
			</view> -->
			<!-- 人员 -->
			<!-- 	<view class="con_box status">
				<view class="title">
					{{filterType.user_id.text}}
				</view>
				<view class="list" >
					<text :class="{active: item.id === peopleID}"  v-for="(item,index) in filterType.user_id.items" :key="index" @click="checkPeople(item)">{{item.title}}</text>
				</view>
			</view> -->
			<view class="btn">
				<button class="cancel" type="default" @click="cancelFilter">
					取消
				</button>
				<button class="sure" type="default" @click="filterInfo">
					确定
				</button>
			</view>
		</view>
		<!-- 筛选结束 -->
		<!-- 筛选信息 -->
		<view class="filterInfo_box" v-if="isFilterInfo">
			<view class="con_box1">
				<view class="search" @click="searchFn">
					<image
						src="../../../static/approval/search.png"
						mode=""
					></image>
					<text>搜索</text>
				</view>
				<view class="search" @click="filterAginFn">
					<image
						src="../../../static/approval/filters.png"
						mode=""
					></image>
					<text style="color: #406ceb">筛选</text>
				</view>
			</view>
			<view class="top">
				<text>筛选信息</text>
				<image
					@click="exitFilter"
					src="../../../static/approval/deletes.png"
					mode=""
				></image>
			</view>
			<view
				class="con_list"
				v-for="(item, index) in filterList"
				:key="index"
				@click="approvalDetailFn(item)"
			>
				<view class="left">
					<image
						src=""
						mode=""
						style="
							width: 66upx;
							height: 66upx;
							border-radius: 50%;
							background: rgba(216, 216, 216, 1);
						"
					></image>
				</view>
				<view class="right">
					<view class="title">
						<text class="name">{{ item.title }}</text>
						<text class="time">2020.04.21</text>
					</view>
					<view class="name">签约公司：{{ item.company }}</view>
					<view class="name">信息类型：{{ item.news_type }}</view>
					<view class="name">签单销售：{{ item.user }}</view>
					<view class="hint">{{ item.status }}</view>
				</view>
			</view>
			<view
				class="tip"
				style="font-size: 26upx; text-align: center; padding: 20upx 0"
				v-if="filterList.length == 0"
			>
				暂无内容~
			</view>
		</view>
		<!-- 筛选信息结束 -->
		<view class="loading" v-if="isShow && approvalList.length !== 0">{{
			loadingTxt
		}}</view>
		<view class="loading" v-if="isFilterInfo && filterList.length !== 0">{{
			loadingTxt
		}}</view>
	</view>
</template>

<script>
let page = 0,
	timer = null;
import timeSelector from "@/component/wing-time-selector/wing-time-selector.vue";
import navigation from "@/component/navigation.vue";
import sun from "@/utils/sun.js";
import titleFix from "@/utils/titleFix";
export default {
	name:"mySend",
	mixins: [titleFix],
	components: {
		navigation,
		timeSelector,
	},
	data() {
		return {
			titles: ["待我审批的", "我已审批的"],
			scrollLeft: 0, //顶部选项卡左滑距离
			tabCurrentIndex: 0, //当前选项卡索引
			name: "", //搜索物品名称
			isShow: true,
			isSearch: false, //是否搜索
			isFilter: false, //是否筛选
			checkId: "all", //选中状态位置
			introID: "all", //选中审核项位置
			companyID: "all", //选中公司位置
			timeID: "all", //选中时间位置
			timeTypeID: "create_time", //选中时间类型位置
			peopleID: "all", //选中人员位置
			isFilterInfo: false, //是否展示筛选信息页面
			approvalList: [], //待审核
			number: 0, //数量
			searchResultList: [], //搜索列表
			filterType: {
				check_status: {},
				company_id: {},
				confirm_intro: {},
				range: {},
				user_id: {},
			}, //筛选项目
			filterList: [], //筛选列表
			loadingTxt: "加载完成",
		};
	},
	onShow() {
		this.getWaitApproval();
	},
	onPullDownRefresh() {
		//下拉的生命周期
		this.getWaitApproval();
	},
	// onReachBottom() {
	// 	//阻止重复加载
	// 	if(timer !== null){
	// 		clearTimeout(timer)
	// 	}
	// 	if(this.isShow){
	// 		timer=setTimeout(()=>this.getMoreNews(),500)
	// 	}
	// 	if(this.isFilterInfo){
	// 		timer=setTimeout(()=>this.getMoreFilter(),500)
	// 	}

	// },
	methods: {
		//获取审核搜索项
		getFilterType() {
			let that = this;
			sun.request({
				url: "/h5/order.search/myconfirm",
				showLoading: true,
				token: true,
				data: {},
				success(res) {
					if (res.code == 200) {
						that.filterType = res.data;
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					});
				},
			});
		},
		//获取数据
		getWaitApproval() {
			let that = this;
			page = 0;
			sun.request({
				url: "/h5/order.confirm/confirmmine",
				showLoading: true,
				token: true,
				data: {
					page: 0,
					limit: 5, //条数
				},
				success(res) {
					if (res.code == 200) {
						that.approvalList = res.data.list;
						// that.number=that.approvalList.length;
						// if(type==0){
						// that.titles[0]="待我审批的("+that.number+")"
						// }
					}
					//停止下拉样式
					uni.stopPullDownRefresh();
					page++;
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					});
				},
			});
		},
		//加载更多的信息
		getMoreNews() {
			this.loadingTxt = "加载中";
			let that = this;
			uni.showNavigationBarLoading();
			sun.request({
				url: "/h5/order.confirm/confirmmine",
				showLoading: true,
				token: true,
				data: {
					page: page,
					limit: 5, //条数
				},
				success: (res) => {
					if (res.data.list.length == 0) {
						that.loadingTxt = "已经加载全部";
						return;
					}
					that.approvalList = that.approvalList.concat(res.data.list);
					//停止下拉样式
					uni.stopPullDownRefresh();
					//隐藏标题读取
					uni.hideNavigationBarLoading();
					page++;
				},
			});
		},
		//tab切换
		changeTab(e) {
			this.tabCurrentIndex = e;
			if (this.isShow) {
				this.approvalList = [];
				this.getWaitApproval(this.tabCurrentIndex);
			}
			if (this.isSearch) {
				this.searchResultList = [];
				this.getName();
			}
			if (this.isFilterInfo) {
				this.filterList = [];
				this.getFilterList();
			}
		},
		//搜索
		searchFn() {
			this.isShow = false;
			this.isSearch = true;
			this.isFilterInfo = false;
		},
		//取消搜索
		cancleSearch() {
			this.isShow = true;
			this.isSearch = false;
		},
		//筛选
		filterFn() {
			this.isShow = false;
			this.isFilter = true;
			this.getFilterType();
		},
		//获取输入框输入内容
		getName: function (e) {
			this.name = e.target.value;
			this.getPhoneList(this.name);
		},
		getPhoneList(value) {
			let that = this;
			sun.request({
				url: "/h5/order.confirm/confirmmine",
				showLoading: true,
				token: true,
				data: {
					keyword: value,
				},
				success(res) {
					if (res.code == 200) {
						that.searchResultList = res.data.list;
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					});
				},
			});
		},
		getMoreSearch() {},
		//清空输入框
		clearName() {
			this.name = "";
		},
		//选择状态
		checkStatus(item) {
			this.checkId = item.id;
		},
		//选择公司
		checkCompany(item) {
			this.companyID = item.id;
		},
		//选择审核项
		checkIntro(item) {
			this.introID = item.id;
		},
		//选择时间
		checkTime(item) {
			this.timeID = item.id;
		},
		//选择时间类型
		checkTimeType(item) {
			this.timeTypeID = item.id;
		},
		//开始时间
		bindStartDate(e) {
			this.filterType.range.items[4].title = e.ymd;
			this.timeID = "start_date";
		},
		//结束时间
		bindEndDate(e) {
			this.filterType.range.items[5].title = e.ymd;
			this.timeID = "end_date";
		},
		//录入时间时间
		bindDateChange(e) {
			this.filterType.range_type.items[0].title = e.ymd;
			this.timeTypeID = "create_time";
		},
		//举办时间时间
		bindTimeChange(e) {
			this.filterType.range_type.items[1].title = e.ymd;
			this.timeTypeID = "event_time";
		},
		//签单时间时间
		bindChange(e) {
			this.filterType.range_type.items[2].title = e.ymd;
			this.timeTypeID = "sign_time";
		},
		//选择人员
		checkPeople(item) {
			this.peopleID = item.id;
		},
		//取消筛选
		cancelFilter() {
			this.isFilter = false;
			this.isShow = true;
		},
		//过滤信息
		filterInfo() {
			this.isFilter = false;
			this.isFilterInfo = true;
			this.getFilterList();
		},
		//退出筛选
		exitFilter() {
			this.isFilterInfo = false;
			this.isShow = true;
		},
		//再次筛选
		filterAginFn() {
			this.isFilterInfo = false;
			this.isFilter = true;
		},
		getFilterList() {
			let that = this;
			page = 0;
			sun.request({
				url: "/h5/order.confirm/confirmmine",
				showLoading: true,
				token: true,
				data: {
					page: 0,
					limit: 5, //条数
					check_status: that.checkId,
					company_id: that.companyID,
					confirm_intro: that.introID,
					range:
						that.timeID == "start_date" || that.timeID == "end_date"
							? that.filterType.range.items[4].title +
							  "~" +
							  that.filterType.range.items[5].title
							: that.timeID,
					// user_id:that.peopleID
				},
				success(res) {
					if (res.code == 200) {
						that.filterList = res.data ? res.data.list : [];
					}
					//停止下拉样式
					uni.stopPullDownRefresh();
					page++;
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					});
				},
			});
		},
		//得到更多筛选
		getMoreFilter() {
			this.loadingTxt = "加载中";
			let that = this;
			uni.showNavigationBarLoading();
			sun.request({
				url: "/h5/order.confirm/confirmmine",
				showLoading: true,
				token: true,
				data: {
					page: page,
					limit: 5, //条数
					check_status: that.checkId,
					company_id: that.companyID,
					confirm_intro: that.introID,
					range:
						that.timeID == "start_date" || that.timeID == "end_date"
							? that.filterType.range.items[4].title +
							  "~" +
							  that.filterType.range.items[5].title
							: that.timeID,
					// user_id:that.peopleID
				},
				success: (res) => {
					if (res.data.list.length == 0) {
						that.loadingTxt = "已经加载全部";
						return;
					}
					that.filterList = that.filterList.concat(res.data.list);
					//停止下拉样式
					uni.stopPullDownRefresh();
					//隐藏标题读取
					uni.hideNavigationBarLoading();
					page++;
				},
			});
		},

		//审批详情
		approvalDetailFn(item) {
			uni.navigateTo({
				url: `${item.path}?id=${item.id}`,
			});
		},
	},
};
</script>

<style lang="less">
/* 顶部tabbar */
page {
	padding-top:0;
	background: rgba(246, 246, 246, 0.78);
	padding-bottom: 120upx;
}

.nav-bar {
	position: fixed;
	left: 0;
	// top: 90upx;
	// z-index: 10;
	height: 90upx;
	white-space: nowrap;
	box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.06);
	background-color: #fff;
	padding-top: 20upx;
	box-sizing: border-box;
	padding-left: 20upx;
	background: #ffffff;
	z-index: 5;

	.nav-item {
		width: 50%;
		box-sizing: border-box;
		display: inline-block;
		// width: 150upx;
		padding: 5upx 20upx;
		// height: 41upx;
		text-align: center;
		// line-height: 40upx;
		font-size: 30upx;
		color: #303133;
		position: relative;

		&:after {
			content: "";
			width: 0;
			height: 0;
			border-bottom: 4upx solid #007aff;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			transition: 0.3s;
		}
	}

	.current {
		color: rgba(64, 108, 235, 1);

		&:after {
			width: 30%;
		}
	}
}

.content {
	width: 100%;
	height: auto;
	// background: #FFFFFF;
	position: relative;
}

.con_box1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 88upx;
	background: #ffffff;
	border-bottom: 1upx solid #eeeeee;
	z-index: 9;
	box-sizing: border-box;
	display: flex;

	justify-content: space-around;

	.search {
		width: 20%;
		height: 100%;
		display: flex;
		float: left;
		align-items: center;
		justify-content: center;

		image {
			width: 46upx;
			height: 46upx;
		}

		text {
			width: auto;
			height: 40upx;
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 40upx;
		}
	}
}

.con_box2 {
	width: 100%;
	height: auto;
	padding-top: 88upx;
}

.con_list {
	width: 100%;
	height: auto;
	border-bottom: 2upx solid #eeeeee;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;

	.left {
		width: 100upx;
		height: auto;
		padding-left: 32upx;
		padding-top: 32upx;
		box-sizing: border-box;
		background: #ffffff;
	}

	.right {
		width: 650upx;
		padding: 32upx 32upx 32upx 22upx;
		box-sizing: border-box;
		background: #ffffff;

		.title {
			width: 100%;
			margin-bottom: 7upx;
			position: relative;

			.name {
				width: auto;
				height: 100%;
				font-size: 28upx;
				color: rgba(51, 51, 51, 1);
				line-height: 48upx;
			}

			.time {
				width: auto;
				font-size: 24upx;
				color: rgba(153, 153, 153, 1);
				line-height: 48upx;
				position: absolute;
				right: 0;
			}
		}

		.name {
			width: auto;
			font-size: 26upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 37upx;
		}

		.hint {
			width: auto;
			font-size: 26upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(231, 184, 94, 1);
			line-height: 37upx;
			margin-top: 4upx;
		}
	}
}

// 搜索
.search_box {
	width: 100%;
	height: auto;

	.top {
		width: 100%;
		height: auto;
		padding: 16upx 24upx 16upx 24upx;
		display: flex;
		position: relative;
		border-bottom: 1upx solid #eeeeee;
		box-sizing: border-box;

		image {
			width: 46upx;
			height: 46upx;
		}

		image.search {
			position: absolute;
			left: 5%;
			top: 50%;
			transform: translateY(-50%);
			z-index: 5;
		}

		image.cancel {
			position: absolute;
			right: 20%;
			top: 50%;
			transform: translateY(-50%);
			z-index: 5;
		}

		.input {
			width: 595upx;
			height: 56upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 5upx;
			padding-left: 78upx;
			box-sizing: border-box;
			color: #333333;
		}

		.cancel {
			font-size: 28upx;
			color: rgba(64, 108, 235, 1);
			line-height: 50upx;
			margin-left: 32upx;
		}
	}
}

.search_list {
	width: 100%;
	height: auto;

	.tip {
		width: 100%;
		height: auto;
		padding: 14upx 26upx 14upx 26upx;
		box-sizing: border-box;
		font-size: 26upx;
		color: rgba(153, 153, 153, 1);
	}
}

.search_list .con_list {
	width: 100%;
	height: auto;
	border-bottom: 1upx solid #eeeeee;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;

	.left {
		width: 100upx;
		height: auto;
		padding-left: 32upx;
		padding-top: 32upx;
		box-sizing: border-box;
		background: #ffffff;
	}

	.right {
		width: 650upx;
		padding: 32upx 32upx 32upx 22upx;
		box-sizing: border-box;
		background: #ffffff;

		.title {
			width: 100%;
			margin-bottom: 7upx;
			position: relative;

			.name {
				width: auto;
				height: 100%;
				font-size: 28upx;
				color: rgba(51, 51, 51, 1);
				line-height: 48upx;
			}

			.time {
				width: auto;
				font-size: 24upx;
				color: rgba(153, 153, 153, 1);
				line-height: 48upx;
				position: absolute;
				right: 0;
			}
		}

		.name {
			width: auto;
			font-size: 26upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 37upx;
		}

		.hint {
			width: auto;
			font-size: 26upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(231, 184, 94, 1);
			line-height: 37upx;
			margin-top: 4upx;
		}
	}
}

// 筛选
.filter_box {
	width: 100%;
	background: #ffffff;

	.con_box {
		width: 100%;
		height: auto;
		padding: 31upx 33upx 32upx 32upx;
		box-sizing: border-box;

		.title {
			width: 100%;
			padding-bottom: 16upx;
			padding-left: 7upx;
			box-sizing: border-box;
			font-size: 28upx;
			color: rgba(51, 51, 51, 1);
		}

		.list {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: left;

			text {
				width: 207upx;
				min-height: 85upx;
				text-align: center;
				background: rgba(246, 246, 246, 1);
				border-radius: 15upx;
				display: flex;
				margin-bottom: 24upx;
				margin-right: 22upx;
				font-size: 26upx;
				align-items: center;
				justify-content: center;
				color: rgba(102, 102, 102, 1);
			}

			.active {
				background: #eef2ff;
				color: #406ceb;
			}
		}
	}

	.btn {
		width: 100%;
		padding: 20upx;
		box-sizing: border-box;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #ffffff;

		button {
			width: 307upx;
			height: 80upx;
			border-radius: 58upx;
			border: 1px solid rgba(64, 108, 235, 1);
			line-height: 80upx;
			font-size: 32upx;
		}

		.cancel {
			color: rgba(64, 108, 235, 1);
			background: #ffffff;
		}

		.sure {
			background: rgba(64, 108, 235, 1);
			color: rgba(255, 255, 255, 1);
		}
	}
}

// 筛选信息
.filterInfo_box {
	width: 100%;
	height: auto;

	.top {
		width: 100%;
		height: auto;
		padding: 14upx 26upx;
		box-sizing: border-box;
		display: flex;
		position: relative;

		text {
			width: auto;
			font-size: 26upx;
			color: rgba(153, 153, 153, 1);
			line-height: 37upx;
		}

		image {
			width: 33upx;
			height: 33upx;
			position: absolute;
			right: 26upx;
		}
	}
}

.orange {
	font-size: 26upx;
	color: rgba(231, 184, 94, 1);
}

.green {
	color: #3cc2a1;
	font-size: 26upx;
}

.red {
	font-size: 26upx;
	color: #e9796d;
}

.gray {
	font-size: 26upx;
	color: #666666;
}

.loading {
	line-height: 2em;
	text-align: center;
	color: #888;
	margin-top: 30upx;
	font-size: 30upx;
}
</style>
